(function (fruit, util, global) {


    fruit.ui.define("fruit.ui.Tree", {
        events: ["itemSelected","clusterSelected"],
        view: {
            props: {
                'class': 'f-tree'
            },
            content: {
                type: 'fruit.ui.TreeNode',
                props: {
                    labelPath: "{#labelPath}",
                    childrenPath: "{#childrenPath}"
                }
            }
        },
        properties: {
            labelPath: {
                value: "name",
                observable: true
            },
            childrenPath: {
                value: "nodes",
                readonly: true
            },
            selectedItem: {
                value: null,
                observable: true
            },
            selectedCluster: {
                value: null,
                observable: true
            }
        },
        methods: {
            itemSelected: function (item) {
                this.unSelected();
                item.active();
                this.fire("itemSelected", item);
                this.selectedItem(item);
            },
            clusterSelected:function(cluster){
                this.unSelected();
                cluster.active();
                this.fire("clusterSelected", cluster);
                this.selectedCluster(cluster);
            },
            unSelected:function(){
                var selectedItem = this.selectedItem();
                var selectedCluster = this.selectedCluster();
                if (selectedItem) {
                    selectedItem.inactive();
                }
                if (selectedCluster) {
                    selectedCluster.inactive();
                }
                this.selectedItem(null);
                this.selectedCluster(null);
            }
        }
    });


    fruit.ui.define("fruit.ui.TreeNode", {
        view: {
            content: {
                tag: "ul",
                props: {
                    items: "{#nodes}",
                    template: {
                        content: {
                            type: 'fruit.ui.Tree.Li',
                            props: {
                                labelPath: "{#labelPath}",
                                childrenPath: "{#childrenPath}"
                            }
                        }
                    }
                }
            }
        },

        properties: {
            nodes: {
                getter: function () {
                    var childrenPath = this.childrenPath();
                    var model = this.model();
                    if (model) {
                        return model.get ? model.get(childrenPath) : model[childrenPath];
                    }
                },
                setter: function (value) {

                }
            },
            labelPath: {
                value: "name",
                observable: true
            },

            childrenPath: {
                value: "nodes"
            }
        },
        methods: {
            onInit: function () {
                this.on("propertyChanged", function (sender, args) {
                    if (args.property == "model") {
                        this.notifyPropertyChanged("nodes");
                    }
                });
            }
        }
    });


    fruit.define("TreeLiModel", fruit.DynamicModel, {
        properties: {
        }
    });

    fruit.ui.define("fruit.ui.Tree.Li", {
        view: {
            tag: "li",
            props: {
                'class': 'f-tree-item f-tree-item-open {#selected}',
                'treeType':'{#treeType}'
            },
            content: [
                {
                    props: {
                        'class': 'f-tree-item-container'
                    },
                    content: [
                        {
                            name: 'arrow',
                            tag: 'span',
                            props: {
                                'class': '{#arrow}'
                            },
                            events: {
                                'click': '{#_arrow_click}'
                            }
                        },
                        {
                            name: 'icon',
                            tag: 'span',
                            props: {
                                'class': '{#icon}'
                            }
                        },
                        {
                            name: 'f-tree-item-text',
                            tag: 'span',
                            props: {
                                'class': 'f-tree-item-text'
                            },
                            content: "{#label}"
                        }
                    ],
                    events: {
                        'click': '{#_item_click}'
                    }
                },
                {
                    type: "fruit.ui.TreeNode",
                    props: {
                        'class': 'f-tree-wrap',
                        labelPath: "{#labelPath}",
                        childrenPath: "{#childrenPath}"
                    }
                }
            ]
        },
        properties: {
            model: {
                inherits: true,
                type: TreeLiModel
            },
            label: {
                getter: function () {
                    var labelPath = this.labelPath();
                    var model = this.model();
                    if (model) {
                        return model.get(labelPath);
                    }
                }
            },
            treeType:{
                getter: function () {
                    var model = this.model();
                    var childrenPath = this.childrenPath();
                    if (model) {
                        var type = model.get("type");
                        if (type) {
                            return type;
                        }

                        if(model.get(childrenPath) == null || model.get(childrenPath).length == 0){
                            return "item";
                        }else {
                            return "cluster";
                        }
                    }
                }
            },
            icon: {
                getter: function () {
                    var model = this.model();
                    var childrenPath = this.childrenPath();
                    if (model) {
                        var icon = model.get("icon");
                        if (icon) {
                            return icon;
                        }

                        var type = this.treeType();
                        if(type == "cluster"){
                            return "icon-folder-close-x20";
                        }else{
                            return "f-tree-item-file";
                        }

                    }
                }
            },
            arrow: {
                getter: function () {
                    var model = this.model();
                    var childrenPath = this.childrenPath();
                    if (model) {
                        var icon = model.get("icon");
                        if (model.get(childrenPath) == null || model.get(childrenPath).length == 0) {
                            return "f-tree-item-arrow-blank"
                        } else {
                            return "f-tree-item-arrow";
                        }
                    }
                }
            },
            labelPath: {
                value: "name",
                observable: true
            },
            childrenPath: {
                value: "nodes"
            },
            selected:{
                getter:function(){
                    var model = this.model();
                    if (model) {
                        var self = this;
                        var selected = model.get("selected");
                        if(selected){
                            setTimeout(function(){
                                self.select();
                            })
                        }
                    }
                }
            }
        },
        methods: {
            onInit: function () {
                this.inherited();
                this.on("propertyChanged", function (sender, args) {
                    if (args.property == "model") {
                        this.notifyPropertyChanged("label");
                        this.notifyPropertyChanged("icon");
                        this.notifyPropertyChanged("arrow");
                        this.notifyPropertyChanged("treeType");
                        this.notifyPropertyChanged("selected");
                    }
                })
            },
            _arrow_click: function () {
                this.$().toggleClass("f-tree-item-open");
            },
            _item_click: function (sender, args) {
                var tree = this.getRootTree();
                var type = this.treeType();
                if(this.$().hasClass("f-tree-item-selected")){
                    tree.unSelected();
                }else{
                    if(type=="item"){
                        tree.itemSelected(this);
                    }else{
                        tree.clusterSelected(this);
                    }
                }
            },
            select:function(){
                var tree = this.getRootTree();
                var type = this.treeType();
                if(tree){
                    if(type=="item"){
                        tree.itemSelected(this);
                    }else{
                        tree.clusterSelected(this);
                    }
                }
            },
            open:function(){
                this.$().addClass("f-tree-item-open");
            },
            close:function(){
                this.$().removeClass("f-tree-item-open");
            },
            active: function () {
                this.$().addClass("f-tree-item-selected");
            },
            inactive: function () {
                this.$().removeClass("f-tree-item-selected");
            },
            getRootTree:function(){
                if(this.tree){
                    return this.tree;
                }else{
                    var tree = this.tree =  this.parents(function(el){
                        return el.$type == "fruit.ui.Tree";
                    });
                    return tree;
                }
            }

        }
    });

})(fruit, fruit.util, fruit.global);